<template>
  <div style="height: 100%;">
    <el-container style="margin:0;padding-top: 10px;">
      <el-container>
        <el-aside width="240px">
          <el-card class="box-card-padding-clear m10 bor-1-ccc" style="margin-top: 0;">
            <el-header class="lisa-bi-el-header">运力概况</el-header>
            <el-main>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col v-if="summaryData.truck" class="Highlight-bold pad-l-r10">{{summaryData.truck}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>台</el-col>
                <el-col>车辆</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col v-if="summaryData.train" class="Highlight-bold pad-l-r10">{{summaryData.train}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>节</el-col>
                <el-col>火车车厢</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col v-if="summaryData.ship" class="Highlight-bold pad-l-r10">{{summaryData.ship}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>艘</el-col>
                <el-col>轮船</el-col>
              </el-row>
            </el-main>
          </el-card>
          <el-card class="box-card-padding-clear m10 bor-1-ccc">
            <el-header class="lisa-bi-el-header">运营概况</el-header>
            <el-main>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>本日发运</el-col>
                <el-col v-if="opData.delivery_today" class="Highlight-bold pad-l-r10">{{opData.delivery_today}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>台</el-col>
                <el-col>商品车</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>公路占比:</el-col>
                <el-col v-if="opData.road_percent" class="Highlight-bold pad-l-r10">{{opData.road_percent}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>铁路占比:</el-col>
                <el-col v-if="opData.train_percent" class="Highlight-bold pad-l-r10">{{opData.train_percent}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>联运占比:</el-col>
                <el-col v-if="opData.mix_percent" class="Highlight-bold pad-l-r10">{{opData.mix_percent}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>全网库存:</el-col>
                <el-col v-if="opData.stock_sum" class="Highlight-bold pad-l-r10">{{opData.stock_sum}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
                <el-col>台商品车</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>南昌库:</el-col>
                <el-col v-if="opData.stock_nanchang" class="Highlight-bold pad-l-r10">{{opData.stock_nanchang}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
                <el-col>台</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>重庆库:</el-col>
                <el-col v-if="opData.stock_chongqing" class="Highlight-bold pad-l-r10">{{opData.stock_chongqing}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
                <el-col>台</el-col>
              </el-row>
              <el-row type="flex" align="bottom" justify="center" class="f10 mb20 el-col-24-clear w100">
                <el-col>东莞库:</el-col>
                <el-col v-if="opData.stock_dongguan" class="Highlight-bold pad-l-r10">{{opData.stock_dongguan}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0%</el-col>
                <el-col>台</el-col>
              </el-row>
            </el-main>
          </el-card>
        </el-aside>
        <el-container>
          <div id="myBMap1" class="clearFix card-shadow">
            <div class="clearFix">
              <canvas></canvas>
            </div>
          </div>
          <el-footer style="padding: 10px 0 0 0;height: auto;">
            <el-card class="box-card-padding-clear bor-1-ccc">
              <el-header class="lisa-bi-el-header">在途跟踪</el-header>
              <el-main>
                <el-row type="flex" align="center" justify="space-around" class="f10 mb20 el-col-24-clear w100">
                  <el-col class="w100 ta-c">
                    <div v-if="overWatchData.enroute" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.enroute}}</div>
                    <div v-else class="Highlight-bold pad-l-r10">0</div>
                    <div class="margin-center mt10">行驶车辆</div>
                  </el-col>
                  <el-col class="w100 ta-c">
                    <div v-if="overWatchData.static" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.static}}</div>
                    <div v-else class="Highlight-bold pad-l-r10">0</div>
                    <div class="margin-center mt10">静止车辆</div>
                  </el-col>
                  <el-col class="w100 ta-c">
                    <div v-if="overWatchData.offline" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.offline}}</div>
                    <div v-else class="Highlight-bold pad-l-r10">0</div>
                    <div class="margin-center mt10">离线车辆</div>
                  </el-col>
                </el-row>
                <el-row type="flex" align="center" justify="space-around" class="f10 mb20 el-col-24-clear w100">
                  <el-col class="w100 ta-c">
                    <div v-if="overWatchData.train" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.train}}</div>
                    <div v-else class="Highlight-bold pad-l-r10">0</div>
                    <div class="margin-center mt10">行驶列车</div>
                  </el-col>
                  <el-col class="w100 ta-c">
                    <div v-if="overWatchData.ship" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.ship}}</div>
                    <div v-else class="Highlight-bold pad-l-r10">0</div>
                    <div class="margin-center mt10">在途轮船</div>
                  </el-col>
                  <el-col class="w100 ta-c">
                    <div v-show="false" class="Highlight-bold pad-l-r10 margin-center">{{overWatchData.ship}}</div>
                    <div class="margin-center mt10 c-fff">在途轮船</div>
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-footer>
        </el-container>
        <el-aside width="240px">
          <el-card class="box-card-padding-clear m10 bor-1-ccc" style="margin-top: 0;">
            <el-header class="lisa-bi-el-header">安全事故</el-header>
            <el-main>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>全网累计:</el-col>
                <el-col v-if="safetyData.buyout" class="Highlight-bold pad-l-r10">{{safetyData.buyout}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>次</el-col>
                <el-col>买断事故</el-col>
              </el-row>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>全网累计:</el-col>
                <el-col v-if="safetyData.repair" class="Highlight-bold pad-l-r10">{{safetyData.repair}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>次</el-col>
                <el-col>维修事故</el-col>
              </el-row>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>全网事故率:</el-col>
                <el-col v-if="safetyData.accident_rate" class="Highlight-bold pad-l-r10">{{safetyData.accident_rate}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
              </el-row>
            </el-main>
          </el-card>
          <el-card class="box-card-padding-clear m10 bor-1-ccc">
            <el-header class="lisa-bi-el-header">自有车队</el-header>
            <el-main>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>中置轴:</el-col>
                <el-col v-if="fleetData.middle_shaft" class="Highlight-bold pad-l-r10">{{fleetData.middle_shaft}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>标准车(6位):</el-col>
                <el-col v-if="fleetData.cargo_6" class="Highlight-bold pad-l-r10">{{fleetData.cargo_6}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
              <el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">
                <el-col>标准车(8位):</el-col>
                <el-col v-if="fleetData.cargo_8" class="Highlight-bold pad-l-r10">{{fleetData.cargo_8}}</el-col>
                <el-col v-else class="Highlight-bold pad-l-r10">0</el-col>
                <el-col>台</el-col>
              </el-row>
              <!--<el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">-->
                <!--<el-col>月均行驶里程:</el-col>-->
                <!--<el-col v-if="safetyData.accident_rate" class="Highlight-bold pad-l-r10">{{safetyData.accident_rate}}</el-col>-->
                <!--<el-col v-else class="Highlight-bold pad-l-r10">0</el-col>-->
                <!--<el-col>Km</el-col>-->
              <!--</el-row>-->
              <!--<el-row type="flex" align="bottom" class="f10 mb20 el-col-24-clear w100">-->
                <!--<el-col>月均油耗:</el-col>-->
                <!--<el-col v-if="safetyData.accident_rate" class="Highlight-bold pad-l-r10">{{safetyData.accident_rate}}</el-col>-->
                <!--<el-col v-else class="Highlight-bold pad-l-r10">0</el-col>-->
                <!--<el-col>L</el-col>-->
              <!--</el-row>-->
            </el-main>
          </el-card>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script type="text/ecmascript-6">
import * as Utils from '@/utils/index'

import echarts from 'echarts'
import BMap from 'BMap'
const MockData = require('^/data/dashboard')
import * as DashboardApi from '@/api/dashboard'
// require('echarts')
require('echarts/extension/bmap/bmap')
export default {
  name: 'Dashboard',
  data() {
    return {
      nowHoursStr: Utils.parseTime(new Date(), '{h}:{i}:{s}'),
      nowMonthDayStr: Utils.parseTime(new Date(), '{m}月{d}日'),
      nowWeekStr: Utils.currentWeek(0),
      fleetData: '', // 车队数据
      opData: '', // 运营数据
      overWatchData: '', // 在途跟踪数据
      safetyData: '', // 安全数据
      summaryData: '' // 运力概要
    }
  },
  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      DashboardApi.getDashboardInfo().then(res => {
        console.log('getDashboardInfo()-res', res)
        this.fleetData = res.data.fleet
        this.opData = res.data.op
        this.overWatchData = res.data.overwatch
        this.safetyData = res.data.safety
        this.summaryData = res.data.t_cap_summary
      }).catch(() => {})
      this.initBMap()
    },
    convertData(cityData, geoCoordMap) {
      const res = []
      for (let i = 0; i < cityData.length; i++) {
        const geoCoord = geoCoordMap[cityData[i].name]
        if (geoCoord) {
          res.push({
            name: cityData[i].name,
            value: geoCoord.concat(cityData[i].value)
          })
        }
      }
      return res
    },
    initBMap() {
      const cityData = MockData.dataOne
      const geoCoordMap = MockData.geoCoordMap
      const _this = this
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('myBMap1'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '实时运力分布',
          left: 'left',
          textStyle: {
            color: '#1E90FF'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        bmap: {
          center: [108.114129, 30.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [{
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'land',
              'elementType': 'all',
              'stylers': {
                'color': '#f3f3f3'
              }
            }, {
              'featureType': 'railway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'color': '#fdfdfd'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'poi',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'green',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'subway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'local',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'building',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'label',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#999999'
              }
            }]
          }
        },
        series: [
          {
            name: '',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: _this.convertData(cityData, geoCoordMap),
            symbolSize: function(val) {
              return val[2] / 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'purple'
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: _this.convertData(cityData.sort(function(a, b) {
              // console.log('b.value - a.value', b.value, a.value)
              return b.value - a.value
            }).slice(0, 5), geoCoordMap),
            symbolSize: function(val) {
              // console.log('bval', val)
              return val[2] / 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'purple',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }
        ]
      }
      // 清空画布防止缓存
      myChart.clear()
      // 设置数据层 需先setOption() 后才能getComponent()
      myChart.setOption(option, true)
      // 获取百度地图实例，使用百度地图自带的控件
      const bmap = myChart.getModel().getComponent('bmap').getBMap()
      bmap.addControl(new BMap.MapTypeControl()) // 调用 MapTypeControlConfig
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#myBMap1{
  margin: 0 0 0 0;
  width:100%;
  height:500px;
}
</style>
